<template>
  <div @dblclick="switchMode" class="full-page flex1">
    <div v-drag="true" @wheel="handleZoom" id="zgdt" :class="isFullscreen ? 'is-fullscreen' : 'map-container'"></div>
  </div>
</template>

<script>
const echarts = require('echarts/lib/echarts')
import china from '@/assets/dict/ChinaData/china.json';
import chinaCitys from '@/assets/dict/ChinaData/chinaCitys.json';
import { getProvinceBySimple, getProvinceByFullName, cityToProvince } from '@/assets/dict/ChinaData'
export default {
  name: 'zgdt',
  props: {
    network: {
      type: [Number, String]
    }
  },
  data() {
    return {
      chartData: [],
      myChart: null,
      barWidth: 6,
      zoomIndex: 0.4,
      timer: null,
      zoomIng: false,
      isFullscreen: false,
      provinceData: []
    }
  },
  methods: {
    queryProvinceData() {
      this.$http.get('/dataView/getFaultAlarmByProvince', {
        params: {
          network: this.network
        }
      }).then(res => {
        this.provinceData = cityToProvince(res || [])
        this.initChart()
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取地图数据失败')
      })
    },
    switchMode() {
      const element = document.querySelector('#screen-container')
      const isFullscreen = document.isFullScreen || document.mozIsFullScreen || document.fullscreen || document.webkitIsFullScreen
      if (isFullscreen) {
        this.exitFullScreen()
      } else {
        this.fullScreen(element)
      }
      document.querySelector('#zgdt').style.left = ''
      document.querySelector('#zgdt').style.top = ''
    },
    fullScreen(element) {
      this.isFullscreen = true
      this.zoomIndex = 0.6
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },
    exitFullScreen() {
      this.isFullscreen = false
      this.zoomIndex = 0.4
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
    },
    handleZoom(e) {
      console.log(e)
      if (!this.zoomIng){
        this.zoomIng = true
        const val = this.zoomIndex + 0.2 * e.zrDelta
        if (val >= 0.4 && val <= 1.1) {
          this.zoomIndex = val
          this.initChart()
        }
        setTimeout(() => {
          this.zoomIng = false
        }, 500)
      }
    },
    async initChart() {
      this.myChart?.dispose();
      const provinceData = this.provinceData
      const zoomIndex = this.zoomIndex
      echarts.registerMap('china', china);
      // 加载纹理图片
      let mapTexture = document.createElement('img');
      mapTexture.src = require('@/assets/bg3.png');
      this.options = {
        tooltip: {
          show: true,
          formatter: function(params) { // 格式化函数
            const item = provinceData.find(province => {
              return province.province.includes(params.name)
            })
            if (!item) {
              return ''
            }
            return `<h4>${getProvinceBySimple(params.name)?.fullName}</h4>
                    <p>设备数 ${item.deviceCount}</p>
                    <p>故障数 ${item.faultCount}</p>
                    <p>告警数 ${item.alarmCount}</p>`; // 显示数据项名称和值（这里假设是三个维度的数据）
          },
        },
        // 叠加阴影层
        // {
        //   "alarmCount": 1,
        //         "province": "北京",
        //         "deviceCount": 1,
        //         "faultCount": 1
        // }
        geo: {
          map: 'china',
          aspectScale: 0.8,
          layoutCenter: ['50%', '50%'],
          layoutSize: '100%',
          zoom: zoomIndex, // 当前视角的缩放比例
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            shadowColor: '#1253A0',
            shadowOffsetX: 0,
            shadowOffsetY: 10,
          },
          emphasis: {
            areaColor: '#101B3B',
          },
          regions: [
            { // 隐藏geo层的南海诸岛 防止样式重叠
              name: '南海诸岛',
              itemStyle: {
                areaColor: '#101B3B',
                borderColor: '#101B3B',
                opacity: 0,
                label: {
                  show: false,
                  color: '#009cc9',
                },
              },
              label: {
                show: false,
                color: '#FFFFFF',
                fontSize: 12,
              },
            },
          ],
        },
        series: [
          {
            type: 'map',
            selectedMode: 'single',
            map: 'china',
            aspectScale: 0.8,
            // roam: true,
            data: [{name: '北京', selected: true}],
            layoutCenter: ['50%', '50%'], // 地图位置
            layoutSize: '100%',
            zoom: zoomIndex, // 当前视角的缩放比例
            label: {
              show: true,
              color: '#ffffff',
              fontSize: 12,
            },

            itemStyle: {
              // 渲染背景图片
              areaColor: '#022d57',
              borderColor: '#2d8acd',
              borderWidth: 1.2,
              shadowColor: 'rgba(0, 0, 0, 0.8)', // 设置阴影颜色，带有透明度
              shadowBlur: 5, // 设置阴影的模糊大小
              shadowOffsetX: 2, // 设置阴影在 X 轴方向上的偏移
              shadowOffsetY: 2, // 设置阴影在 Y 轴方向上的偏移
            },
            emphasis: {
              // 区域
              areaColor: '#ffeb3b', // 高亮时的颜色
              color: '#ffffff',
              itemStyle: {
                areaColor: '#FFBF51',
                color: '#ffffff'
              },
              label: {
                show: true,
                color: '#fff',
              },
            },
          },
        ],
      };
      const el = document.getElementById('zgdt');
      if (!el) {return}
      this.myChart = echarts.init(el);
      this.myChart.setOption(this.options);

    },
    resizeFn() {
      if (!this.timer) {
        this.timer = setTimeout(() => {
          this.zoomIndex = 0.4
          this.initChart()
          clearTimeout(this.timer)
          this.timer = null
        }, 100)
      }
    }
  },
  mounted() {
    this.queryProvinceData()
    window.addEventListener('resize', this.resizeFn)
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeFn);
    this.myChart?.dispose();
  },
  beforeDestroy() {
    this.myChart?.dispose();
  },
}
</script>

<style lang="scss" scoped>
  .full-page {
    height: calc(100vh - 80px);
    overflow: hidden;
    position: relative;
    z-index: 1;
    #zgdt {
      position: absolute;
      width: 200vw;
      height: 200vh;
      z-index: -1;
    }
    .map-container {
      left: -75vw;
      top: -40vh;
    }
    .is-fullscreen {
      left: -70vw;
      top: -40vh;
    }
  }
</style>
